import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './mywallet.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";

import icon_home_more_black from '@/assets/icon_home_more_black.png'
import icon_add_white from '@/assets/icon_add_white.png'

import NavigateBar from "@/components/NavigateBar";
import { getCoins } from "@/store/actions/coins";
import { isUnvalidUserInfo, setCoinInfo, setManageWalletCoinType } from "@/utils/storage";
import { LangVnd } from '@/utils/langVnd';

/**
 * 登录页
 */
export default function MyWalletList() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前币
    const [curList, setCurList] = useState([]);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangVnd);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        // 判断是否需要重登录
        if (isUnvalidUserInfo()) {
            history.replace('/login')
            return
        }

        // 获取币种信息
        doGetCoins();

        //打点
        doHitEvent("MY_WALLET_LIST_START")

        return () => {
            //打点
            doHitEvent("MY_WALLET_LIST_END")
        }
    }, [])

    // 点击 钱包
    const onHandleWalletClick = (index) => {
        console.log('点击了钱包: ' + index);

        if (curList.length > index) {
            let item = curList[index];

            // 缓存
            setCoinInfo(item);

            // 返回
            history.goBack();
        }
    };

    // 点击 钱包
    const onHandleWalletMoreClick = (e, index) => {
        console.log('点击了钱包-更多: ' + index);

        // 保存当前 coinType
        if (curList.length > index) {
            let item = curList[index];
            // 缓存
            setManageWalletCoinType(item.coinType);

            // 跳转管理页
            history.push('/mywalletmanage');
        }

        e.stopPropagation();
    };

    // 获取币种信息 返回
    const onDoGetCoinsCallback = (success, data, isNeedToReLogin) => {
        //关闭loading
        setMaskVisible(false)
        console.log('获取币种信息接口 返回: ' + success);

        if (success && data) {
            // 处理流程业务
            if (data.length > 0) {
                // 更新列表

                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    let coinName = item.coinName || "";
                    let name = item.name || "";
                    let symbol = item.symbol || "";
                    let mainCoinType = item.mainCoinType || "";
                    let coinType = item.coinType || "";
                    let logo = item.logo || icon_add_white;
                    let address = item.address || "";

                    if (coinName.length === 0) {
                        coinName = symbol;
                    }

                    item.coinName = coinName;
                    item.name = name;
                    item.logo = logo;
                    item.address = address;
                    item.symbol = symbol;
                    item.mainCoinType = mainCoinType;
                    item.coinType = coinType;
                }

                setCurList(data);
            }
        } else {
            if (isNeedToReLogin) {
                history.replace('/login')
            }
        }
    };


    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    // 获取币种信息
    const doGetCoins = async () => {
        console.log("doGetCoins: ");

        try {
            //显示loading
            setMaskVisible(true)

            //获取Action
            const action = getCoins(onDoGetCoinsCallback)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }


    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>{curLang.myWalletListWalletUnderIdentity}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* 菜单 列表 */}
                <div className="pageContentColumnFull">
                    <div className={styles.myWalletList}>
                        {curList && curList.map((value, index) => {
                            return (
                                <div className={styles.myWalletListItem} key={index}>
                                    <img className={styles.myWalletListItemIcon} alt="" src={value.logo} />
                                    <div className={styles.myWalletListItemTextRow} onClick={() => { onHandleWalletClick(index) }}>
                                        <div className={styles.myWalletListItemTitle}>{value.name}</div>
                                        <div className={styles.myWalletListItemDetail}>{value.address}</div>
                                        <img className={styles.myWalletListItemExtIcon} alt="" src={icon_home_more_black} onClick={(e) => { onHandleWalletMoreClick(e, index) }} />
                                    </div>

                                    <div className={styles.myWalletListItemBottomLine}></div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}